{% comment 'header' %}
# This file is part of opentaps Smart Energy Applications Suite (SEAS).

# opentaps Smart Energy Applications Suite (SEAS) is free software:
# you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.

# opentaps Smart Energy Applications Suite (SEAS) is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Lesser General Public License for more details.

# You should have received a copy of the GNU Lesser General Public License
# along with opentaps Smart Energy Applications Suite (SEAS).
# If not, see <https://www.gnu.org/licenses/>.
{% endcomment %}

{% block content %}
<div id="getwebsocketkey">
  <div v-if="show">
    <div class="alert alert-danger mt-3" role="alert" v-if="errors.error" v-cloak>
      ${ errors.error }
    </div>

    <div class="mt-3 text-left" v-if="!success && !processing">
      <span>Click button to connect to Hyperledger Fabric</span>
      <b-button variant="primary" v-on:click.stop.prevent="get_websocketkey()">
        Connect
      </b-button>
    </div>
    <div v-if="processing">Please enter your password into the ws-wallet app console.</div>
  </div>
</div>

<script>
(function() {
  {% load js_csrf_token from core_tags %}
  const CSRF_TOKEN = '{% js_csrf_token %}';

  new Vue({
    delimiters: ['${', '}'],
    name: 'getwebsocketkey',
    el: '#getwebsocketkey',
    data() {
      return {
        csrfmiddlewaretoken: CSRF_TOKEN,
        errors: {'error': null},
        successes:  {'success': null},
        success: false,
        processing: false,
        show: false,
      }
    },
    created: function () {
      eventHub.$on('show_get_websocketkey', x => {this.show = true;});
    },
    methods: {
      get_websocketkey() {
        this.errors = {'error': null};
        this.successes =  {'success': null};
        url = "/opentaps_seas/fabric/websocketkey.json";
        this.processing = true;
        this.success = false;

        data = new Object();
        axios.post(url, data, {headers: {'X-CSRFToken': this.csrfmiddlewaretoken}})
          .then(x => x.data)
          .then(x => {
            if (x.success) {
              this.successes = {'success': 'Successfully connected'};
              this.success = true;
              this.show = false;
              eventHub.$emit('get_websocketkey', this.successes);
             } else if (x.error) {
              this.errors['error'] = x.error;
            } else {
              this.errors['error'] = 'Cannot process';
            }
            this.processing = false;
          })
          .catch(err => {
            e = getResponseError(err);
            console.error(e, err);
            this.errors = e;
            this.processing = false;
          });
      }
    },
  });
})();
</script>
{% endblock content %}
